
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<meta name="robots" content="noindex,nofollow" />
<link rel="stylesheet" media="screen,projection" type="text/css"
	href="css/reset.css" />
<!-- RESET -->
<link rel="stylesheet" media="screen,projection" type="text/css"
	href="css/main.css" />
<!-- MAIN STYLE SHEET -->
<link rel="stylesheet" media="screen,projection" type="text/css"
	href="css/2col.css" title="2col" />
<!-- DEFAULT: 2 COLUMNS -->
<link rel="alternate stylesheet" media="screen,projection"
	type="text/css" href="css/1col.css" title="1col" />
<!-- ALTERNATE: 1 COLUMN -->
<!--[if lte IE 6]><link rel="stylesheet" media="screen,projection" type="text/css" href="css/main-ie6.css" /><![endif]-->
<!-- MSIE6 -->
<link rel="stylesheet" media="screen,projection" type="text/css"
	href="css/style.css" />
<!-- GRAPHIC THEME -->
<link rel="stylesheet" media="screen,projection" type="text/css"
	href="css/mystyle.css" />
<!-- WRITE YOUR CSS CODE HERE -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/switcher.js"></script>
<script type="text/javascript" src="js/toggle.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.tabs.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(".tabs > ul").tabs();
	});
</script>
</head>
<body>
	<div id="main">

		<!-- Tray -->
		<div id="tray" class="box">

			<p class="f-left box">

				<!-- Switcher -->
				<span class="f-left" id="switcher"> <a href="#" rel="1col"
					class="styleswitch ico-col1" title="Display one column"><img
						src="design/switcher-1col.gif" alt="1 Column" />
				</a> <a href="#" rel="2col" class="styleswitch ico-col2"
					title="Display two columns"><img src="design/switcher-2col.gif"
						alt="2 Columns" />
				</a> </span> WebSite: <strong>My Family</strong>

			</p>

			<p class="f-right">
				User: <strong><a href="#">Administrator</a>
				</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong><a href="#"
					id="logout">Log out</a>
				</strong>
			</p>

		</div>
		<!--  /tray -->

		<hr class="noscreen" />

		<!-- Menu -->
		<div id="menu" class="box">

			<ul class="box f-right">
				<li><a href="#"><span><strong>Visit Site
								&raquo;</strong>
					</span>
				</a>
				</li>
			</ul>

			<ul class="box">

				<tiles:insertAttribute name="topbar" />

			</ul>

		</div>
		<!-- /header -->

		<hr class="noscreen" />

		<!-- Columns -->
		<div id="cols" class="box">

			<!-- Aside (Left Column) -->
			<div id="aside" class="box">
				<s:form action="SearchAction" method="POST" name="SearchAction" id="search">
					<fieldset>
						<legend>Search People</legend>
						
							<input type="text" size="17" name="searchByEmail" class="input-text" />&nbsp;
							<s:submit name="submit" value="Search" class="input-submit-02" />
						</fieldset>

				</s:form>
			</div>
			<!-- /aside -->

			<hr class="noscreen" />

			<!-- Content (Right Column) -->
			<div id="content" class="box">

				<tiles:insertAttribute name="body" />

			</div>
			<!-- /content -->

		</div>
		<!-- /cols -->

		<hr class="noscreen" />

		<!-- Footer -->
		<div id="footer" class="box">

			<tiles:insertAttribute name="footer" />

		</div>
		<!-- /footer -->

	</div>
	<!-- /main -->
</body>
</html>